import React, { useEffect, useRef } from 'react';
import { Divider, FormInstance, Form } from 'antd';
import ProTable, { ProColumns } from '@ant-design/pro-table';
import {  getPatientHospitalizationInfo } from '@/services/order/api';
import { showMsg } from '@/utils/utils';
import { useModel } from 'umi';

interface PatientInfoProps {
  onChange: (infos: ORDERAPI.PatientHospitalInfo[]) => void;
  rentType: number;
}

const PatientInfo: React.FC<PatientInfoProps> = (props) => {
  const { onChange, rentType } = props;

  const formRef = useRef<FormInstance>();
  const { initialState } = useModel('@@initialState');
  const columns: ProColumns<ORDERAPI.PatientHospitalInfo>[]= [
    {
      title: '病区',
      dataIndex: 'ward_code',
      hideInTable: true,
      renderFormItem: () => {
        return <Form.Item>
          <span>{initialState?.currentUser?.ward_name}</span>
        </Form.Item>
      }
    },
    {
      title: '病案号',
      dataIndex: 'case_no',
      hideInTable: true
    },
    {
      title: '患者姓名',
      dataIndex: 'patient_name',
      hideInTable: true,
    },
    {
      title: '床位号',
      dataIndex: 'bed_no',
      search: false
    },
    {
      title: '姓名',
      dataIndex: 'patient_name',
      search: false
    },
    {
      title: '住院号',
      dataIndex: 'visit_no',
      search: false
    },
    {
      title: '病区',
      dataIndex: 'ward_name',
      search: false
    }
  ]

  return <div className="service-record-rent">
      <div className="header">
        <div className="title">1.患者信息</div>
      </div>
      <Divider style={{margin: '10px 0'}}/>
      
      <ProTable<ORDERAPI.PatientHospitalInfo, ORDERAPI.PatientHospitalInfo & COMMON.PageParams>
        rowKey="patient_id"
        columns={columns}
        formRef={formRef}
        options={false}
        manualRequest={true}
        className="patient-pro-table"
        bordered
        search={{
          labelWidth: 80,
          span: 6,
          optionRender: (searchConfig, formProps, dom) => {
            dom.shift();
            return dom;
          }
        }}
        // scroll={{ y: 300 }}
        request={async (params) => {
          console.log(params);
          params = Object.assign({}, params, { ward_code: initialState?.currentUser?.ward_code, flag: '1' });
          try {
            if ((params.case_no || '').includes('R')) {
              params.out_visit_no = params.case_no;
              params.case_no = '';
            }
            const data: ORDERAPI.PatientHospitalInfo[] = await getPatientHospitalizationInfo(params);
            return {
              data: data,
              success: true,
              total: data.length
            }
          } catch (error) {
            showMsg(error?.data?.errmsg);
            return {
              data: [],
              success: true,
              total: 0
            }
          }
        }}
        pagination={false}
        rowSelection={{
          type: rentType === 2 ? 'radio' : 'checkbox',
          columnWidth: 60,
          onChange: (selectedRowKeys, selectedRows) => {
            const list = selectedRows.map(item => {
              return {
                admission_num: item.admission_num || item.visit_no,
                bed_no: item.bed_no,
                ic_card_no: item.ic_card_no,
                identity_no: item.identity_no,
                mobile: item.contact_tel_no,
                patient_dept_code: item.admission_dept_code,
                patient_dept_name: item.admission_dept_name,
                patient_id: item.patient_id,
                patient_name: item.patient_name,
                ward: item.ward_code,
                ward_name: item.ward_name
              }
            })
            onChange(list);
          }
        }}
      />
  </div>
}

export default PatientInfo;